/**
* @description: 待办工单
* @author: 梁蕾
* @date:
**/
<template>
  <view class="todo-task-main">
    <nav-bar class="header" back title="待办工单" @goBack="goBack" />
    <view class="main-container">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadMore"
        >
          <!-- 列表循环   -->
          <view class="todo-list" v-for="(item,index) in taskList" :key="index">
            <view class="todo-title">
              <img src="../../static/img/tasktime.png" alt="">
              <text class="todo-main-title">{{ item.name }}</text>
              <van-button type="info" class="todo-btn" @click="toReceive(item)">执行</van-button>
            </view>
            <hr class="todo-hr">
            <view class="top-todo-main">
              <text class="todo-big-ltitle">计划执行时间:</text>
              <text class="todo-small-ltitle">{{item.planStartTimS}}-{{item.planEndTimS}}</text>
            </view>
            <view class="top-todo-main">
              <text class="todo-big-ltitle">执行人员:</text>
              <text class="todo-small-ltitle">{{ item.executerName }}</text>
            </view>
          </view>
        </van-list>
      </van-pull-refresh>
    </view>
  </view>
</template>
<script>
import navBar from '../../components/common/nav-bar'
import {mapGetters} from "vuex";
import moment from "moment";
import {getList} from "../../api/apiIndex";

export default {
  name: 'todoTask',
  components: { navBar },
  props: {},
  data() {
    return {
      taskList:[],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit:20,
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  onLoad() {
    console.log(this.userData)
    this.getTaskListByTodoT()
  },
  mounted() {},
  methods: {
    getTaskListByTodoT() {
      let params = {
        limit: this.limit,
        page: this.page,
        state: "2",
      }
      this.$api.getList(params).then(res => {
        console.log(res);
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.list.map(item => {
          return{
            planStartTimS: item.planStartTim ? moment(item.planStartTim).format('YYYY-MM-DD') :null,
            planEndTimS: item.planEndTim ? moment(item.planEndTim).format('YYYY-MM-DD') : null,
            ...item
          }
        }));
        this.total = res.data.total_number
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getTaskListByTodoT();
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getTaskListByTodoT();
      } else {
        this.finished = true;
      }
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/testProject/index'
      })
    },
    toReceive(item) {
      //  跳转执行工单
      uni.navigateTo({
        url: `/pages/testProject/performTask?objId=${item.objId}&state=${item.taskState}`
      })
    },
  }
};
</script>
<style scoped lang="scss">
.todo-task-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .main-container {
    height: calc(100vh - #{px2vh(163)});
    padding-top: px2vw(30);
    overflow: auto;
    .todo-list {
      width: px2vw(1020);
      //height: px2vh(520);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      padding-bottom: px2vw(30);
      margin: 0  px2vw(30) px2vh(30) px2vw(30) ;
      .todo-title {
        width: px2vw(940);
        height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(6);
          float: left;
        }
        .todo-main-title {
          width: px2vw(600);
          margin-left: px2vw(20);
          margin-top: px2vh(8);
          font-size: px2vh(48);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float: left;
        }
        .todo-btn {
          width: px2vw(200);
          height: px2vh(80);
          background: #417ADC;
          float: right;
          border-radius: px2vw(40) px2vh(40);
        }
      }
      .todo-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-todo-main {
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .todo-big-ltitle,.todo-big-rtitle {
          color: #666;
        }
        .todo-small-ltitle,.todo-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .todo-big-rtitle {
          margin-left: px2vw(245);
        }
      }
    }
  }
}
</style>